<template>
  <div class="Mydevice">
    <section class="part_wrap">
      <div class="toolTop">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-card class="box-card blueline" shadow="hover">
              <div slot="header" class="clearfix">
                <span>设备统计</span>
              </div>
              <div class="text item">
                <div class="text_wrap">
                  <div class="content">
                    <span class="title">在线</span>
                    <span class="online">{{onlineCount}}</span>
                  </div>
                  <div class="content">
                    <span class="title">离线</span>
                    <span class="abnoraml">{{abnoramlCount}}</span>
                  </div>
                </div>
                <Pie v-bind:id="'onlinePie'" v-bind:data="onlineOption"></Pie>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card orangeline" shadow="hover">
              <div slot="header" class="clearfix">
                <span>数据统计</span>
              </div>
              <div class="text item">
                <div class="text_wrap">
                  <div class="content">
                    <span class="title">存储空间</span>
                    <span class="cunchu">2048</span>
                  </div>
                  <div class="content">
                    <span class="title">异常告警</span>
                    <span class="exception">22</span>
                  </div>
                </div>
                <Pie v-bind:id="'expetionPie'" v-bind:data="expetionOption"></Pie>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card pupleline" shadow="hover">
              <div slot="header" class="clearfix">
                <span>用户数据</span>
              </div>
              <div class="text item">
                <div class="text_wrap">
                  <div class="content">
                    <span class="title">激活用户</span>
                    <span class="register">{{activeData}}</span>
                  </div>
                  <div class="content">
                    <span class="title">锁定用户</span>
                    <span class="onlineuser">{{unactiveData}}</span>
                  </div>
                </div>
                <Pie v-bind:id="'userPie'" v-bind:data="userOption"></Pie>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="bottomTop">
        <div id="allmap" v-bind:style="style"></div>
        <section class="main_table">
          <el-table
            v-bind:data="pointTable"
            style="width: 100%;"
            v-bind:header-cell-style="{background: '#1f2548',color:'#fff'}"
            v-bind:row-style="{height:'0'}"
            v-bind:cell-style="{padding:'0'}"
            fit
          >
            <el-table-column prop="deviceID" align="center" label="设备编号" max-width="150"></el-table-column>
            <el-table-column prop="abnormalDevice" align="center" label="设备状态" max-width="150"></el-table-column>
            <el-table-column prop="serviceTime" align="center" label="服务时间" max-width="150"></el-table-column>
            <el-table-column prop="latitude" align="center" label="经度" max-width="150"></el-table-column>
            <el-table-column prop="longitude" align="center" label="经度" max-width="150"></el-table-column>
            <el-table-column
              prop="registered"
              label="在线状态"
              max-width="150"
              :formatter="registeredFormatter"
            ></el-table-column>
          </el-table>
        </section>
        <transition name="el-fade-in-linear">
          <div v-show="show" class="transition-box pop" v-bind:style="popStyle">
            <el-button icon="el-icon-close" v-on:click="popHide" circle></el-button>
            <h3>设备信息</h3>
            <ul>
              <li v-for="item in popData" v-bind:key="item.name">
                <label>{{item.cn}}:</label>
                <span>{{item.value}}</span>
              </li>
            </ul>
          </div>
        </transition>
      </div>
    </section>
    <section class="part2_wrap">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="异常" name="first">
          <el-form :model="params">
            <el-form-item>
              <el-input
                prefix-icon="el-icon-search"
                @change="handleChangeClick"
                placeholder="请输入设备编号"
                v-model="params.search"
              ></el-input>
            </el-form-item>
          </el-form>
          <ul>
            <template v-for="item in paramsData">
              <li>
                <span class="content_wrap">
                  <div class="content">
                    <div class="strong orangedot"></div>
                    <label class="title">{{item.deviceID}}</label>
                  </div>
                </span>
                <span class="dateTime">{{item.content}}</span>
                <span class="dateTime">{{item.createDate}}</span>
              </li>
            </template>
            <section class="toolFoot">
              <el-row :gutter="25">
                <el-col :span="24" class="rightCol">
                  <el-pagination
                    small
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes"
                    :total="total"
                    :pager-count="5"
                  ></el-pagination>
                </el-col>
              </el-row>
            </section>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="最新" name="second" @tab-click="handleClick">
          <el-form :model="newparams">
            <el-form-item>
              <el-input
                @change="handleNewParamsClick"
                prefix-icon="el-icon-search"
                placeholder="请输入设备ID"
                v-model="newparams.search"
              ></el-input>
            </el-form-item>
          </el-form>
          <ul>
            <template v-for="item in newData">
              <li>
                <span class="content_wrap">
                  <div class="content">
                    <div class="strong orangedot"></div>
                    <label class="title">{{item.deviceID}}</label>
                  </div>
                </span>
                <span class="dateTime">{{item.date}}</span>
              </li>
            </template>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="检查" name="third">
          <el-form :model="params">
            <el-form-item>
              <el-input prefix-icon="el-icon-search" placeholder="请输入搜索内容" v-model="params.search"></el-input>
            </el-form-item>
          </el-form>
          <ul>
            <template v-for="item in listData">
              <li>
                <span class="content_wrap">
                  <div class="content">
                    <div class="strong orangedot"></div>
                    <label class="title">{{item.clientId}}</label>
                  </div>
                </span>
                <span class="dateTime">{{item.date}}</span>
              </li>
            </template>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../api/dashboardmg/mydevice.js"></script>

<style lang="scss">
#allmap {
  border-radius: 5px;
}
.Mydevice {
  flex: 1;
  padding: 16px;
  display: flex;
  > section {
    &.part_wrap {
      width: 70%;
      .toolTop {
        .el-col {
          .el-card {
            background-color: #1f2548;
            border: 1px solid #1f2548;
            .el-card__header {
              border-bottom: 1px solid #4b506c;
              span {
                color: #fff;
                font-size: 18px;
              }
            }
            .el-card__body {
              .online {
                font-size: 4rem;
                color: #01caff;
              }
              .abnoraml {
                font-size: 4rem;
                color: #026cd2;
              }
              .cunchu {
                font-size: 4rem;
                color: #6143fe;
              }
              .exception {
                font-size: 4rem;
                color: #ffcc01;
              }
              .register {
                font-size: 4rem;
                color: #f39b13;
              }
              .onlineuser {
                font-size: 4rem;
                color: #01caff;
              }
            }
          }
          //  .blueline {
          //    border-left: 5px solid #01caff;
          //  }
          .text {
            .text_wrap {
              .content {
                display: flex;
                flex-direction: column;
                margin-top: 10px;
                .title {
                  font-size: 2rem;
                  color: #85899c;
                }
              }
            }
            .pic_wrap {
              margin-left: 24%;
            }
          }
          //  .orangeline {
          //    border-left: 5px solid #6143fe;
          //  }
          //  .pupleline {
          //    border-left: 5px solid #f39b13;
          //  }
        }
      }
      .bottomTop {
        padding-top: 2%;
        .pop {
          position: absolute;
          z-index: 10;
          border-radius: 10px;
          background-color: #fff;
          padding: 16px;
          .el-button {
            background: none;
            padding: 0;
            border: 0;
            position: absolute;
            right: 16px;
            top: 16px;
            color: #000;
            font-size: 24px;
          }
          h3 {
            color: #000;
            text-align: center;
            font-size: 24px;
            margin-top: -6px;
            margin-bottom: 8px;
            padding: 5% 0%;
            width: 100%;
            border-bottom: 1px solid #727785;
          }
          ul li {
            color: #000;
            padding: 8px 0;
            font-size: 16px;
            label {
              display: inline-block;
              min-width: 100px;
            }
          }
        }
        .main_table {
          margin-top: 2%;
        }
      }
    }
    &.part2_wrap {
      width: 30%;
      margin-left: 2%;
      background-color: #1f2548;
      border: 1px solid #1f2548;
      .el-tabs {
        width: 100%;
        .el-tabs__header {
          border-bottom: none;
          .el-tabs__nav {
            border: 1px solid #85899c;
            border-bottom: none;
            width: 100%;
            border-left: none;
            .el-tabs__item {
              border-bottom: 1px solid #85899c;
              border-left: 1px solid #85899c;
              border-right: 1px solid #85899c;
              color: #85899c;
              width: 35%;
              padding: 0 55px;
              font-size: 2rem;
            }
            .is-active {
              border-bottom: none;
              border-top: 3px solid #01caff;
              color: #fff;
              border-left: none;
              border-right: none;
              font-size: 2rem;
            }
          }
        }
        .el-tabs__content {
          margin: 5% 5%;
          .el-input__inner {
            background-color: #1f2548;
          }
          ul {
            li {
              display: flex;
              border-bottom: 1px solid #85899c;
              margin-top: 5%;
              flex-flow: wrap;
              justify-content: space-between;
              .content_wrap {
                display: flex;
                flex-direction: column;
                width: 31%;
                .content {
                  display: flex;
                  .title {
                    color: #fff;
                    margin-left: 5%;
                  }
                  .dot {
                    border: 7px solid #026cd2;
                    width: 15px;
                    height: 14px;
                    border-radius: 10px;
                  }
                  .orangedot {
                    border: 4px solid #f39b13;
                    width: 1px;
                    height: 1px;
                    border-radius: 10px;
                    margin-top: 3%;
                  }
                  .bluedot {
                    border: 7px solid #01caff;
                    width: 15px;
                    height: 14px;
                    border-radius: 10px;
                  }
                  .pupledot {
                    border: 7px solid #9a59b5;
                    width: 15px;
                    height: 14px;
                    border-radius: 10px;
                  }
                }
                span {
                  margin-top: 8%;
                  color: #85899c;
                  margin-bottom: 5%;
                }
              }
              .dateTime {
                color: #85899c;
                height: 30px;
              }
            }
            > section {
              &.toolFoot {
                margin-top: 16px;
                .btnCOl .el-button {
                  color: #fff;
                  border: 0;
                  background-color: #2b354e;
                  padding: 4px 8px;
                }
                .rightCol {
                  text-align: right;
                  margin-left: 4%;
                  .el-pagination--small {
                    white-space: nowrap;
                    padding: 2px 5px;
                    color: #303133;
                    font-weight: 700;
                    height: 50px;
                    span {
                      color: #fff;
                      line-height: 30px;
                      .el-input {
                        .el-input__inner {
                          height: 30px;
                          line-height: 30px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
